<template>
  <div>
    <el-drawer
      :title="`权限配置：${roleInfo.name}`"
      size="40%"
      :show-close="false"
      :wrapperClosable="false"
      @open="setAdminDisable"
      :visible.sync="isShowTree">
      <div class="drawer__content">
        <el-tree
          :data="allTree"
          show-checkbox
          default-expand-all
          style="min-height:400px;"
          node-key="id"
          ref="tree"
          highlight-current
          :default-checked-keys="checkedKeys"
          :props="defaultProps">
        </el-tree>
        <div class="drawer__footer">
          <Button long style="margin-right:5px;" @click="close">取 消</Button>
          <Button type="primary" long @click="submit">确 定</Button>
        </div>
      </div>
      <Spin size="large" fix v-if="spinShow"></Spin>
    </el-drawer>
  </div>
</template>

<script>
import _ from 'lodash'
import { updateRoles } from '@/api/permission'
import store from '@/store'
export default {
  props: {
    isShowTree: {
      type: Boolean,
      default: false
    },
    treeList: {
      type: Array,
      required: true,
      default: () => []
    },
    checkedKeys: {
      type: Array,
      default: () => []
    },
    roleInfo: {
      type: Object,
      default: () => {},
      required: true
    }
  },
  watch: {
    treeList: {
      handler(data) {
        if(data.length) {
          this.allTree = data
        }
      },
      immediate: true,
      deep: true
    },
    checkedKeys(data) {
      if(data.length) {
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(data);
        })
      }
    }
  },
  data() {
    return {
      allTree: [],
      defaultProps: {
        children: 'sysPermissionList',
        label: 'permissionName'
      },
      spinShow: true
    }
  },
  methods: {
    async submit() {
      console.log(this.roleInfo.id,'ssss');
      const half1 = this.$refs.tree.getCheckedKeys()
      const half2 = this.$refs.tree.getHalfCheckedKeys()
      const result = [ ...half1, ...half2 ]
      try {
        await updateRoles({
          roleId: this.roleInfo.id,
          permissId: result
        })
        this.$Message.success('修改成功');
        this.close()
        location.reload();
        
      } catch(err) {
        return
      }
    },
    close() {
      this.$emit('update:checkedKeys', [])
      this.allTree = []
      this.$emit('update:isShowTree', false)
    },
    // 限制修改admin权限时，不可取消权限页面的选中
    setAdminDisable() {
      this.spinShow = true
      this.allTree = _.cloneDeep(this.treeList)
      this.allTree.forEach(item => {
        if(this.roleInfo.name === 'admin' && item.permissionName === '权限') {
          item.disabled = true
          item.sysPermissionList.forEach(sub => {
            sub.disabled = true
          })
        }
      });
      this.spinShow = false
    }
  }
}
</script>

<style lang="less" scoped>
  .drawer__footer {
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }
</style>